<template>
  <div class="login-card">
    <h1 class="title">登录</h1>
    hello,welcome to smart guangu
    <el-divider />
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="common">
        <el-icon><User /></el-icon>
        <span>普通用户</span>
      </el-menu-item>
      <el-menu-item index="traffic">
        <el-icon><Guide /></el-icon>
        <span>交通管理员</span></el-menu-item
      >
      <el-menu-item index="admin">
        <el-icon><Key /></el-icon>
        <span>超级管理员</span></el-menu-item
      >
    </el-menu>
    <el-form
      :model="form"
      class="login-form"
      label-width="60px"
      label-position="right"
      size="large"
    >
      <el-form-item label="用户名">
        <el-input v-model="form.username" :prefix-icon="User" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          type="password"
          v-model="form.password"
          show-password
          :prefix-icon="Lock"
        />
      </el-form-item>
      <el-form-item>
        <div class="btn">
          <el-tooltip
            effect="light"
            content="还没有账号,请先注册"
            placement="bottom"
          >
            <el-button @click="router.push('/register')" v-show="activeIndex === 'common'">注册</el-button>
          </el-tooltip>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { userLoginHttp } from "@/api/user";
import { useUserStore } from "@/stores/userStore";
import { User, Guide, Key, Lock } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const { setCurrentUser } = useUserStore();

const router = useRouter();
// 定义当前的菜单项
const activeIndex = ref("common");
// 切换菜单项
const handleSelect = (index) => {
  activeIndex.value = index;
  console.log(activeIndex.value);
};

const form = ref({
  username: "",
  password: "",
});
const handleLogin = async () => {
  let user = form.value;
  user.type = activeIndex.value;
  if (!user.username || !user.password) {
    ElMessage.error("请输入用户名和密码");
    return;
  } else {
    const res = await userLoginHttp(user);
    if (res) {
      router.push({ name: "home", query: { type: user.type } });
      /* 将登录用户的信息发送给userStore */
      setCurrentUser(user);
    }
  }
};
</script>

<style scoped lang="scss">
.login-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 50px;
  background-color: #ffffff;
  border-radius: 10px;
  .title {
    font-family: "Courier New", Courier, monospace;
  }
  .el-menu-demo {
    display: flex;
    justify-content: space-around;
  }
  .login-form {
    margin-top: 20px;
    // 按钮样式
    .btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .el-button{
        flex: 1; // 让按钮平分可用空间
        margin: 0 5px; // 增加按钮之间的间距
        
      }
    }
  }
}
</style>
